<template>
  <el-dialog
    :visible.sync="dialogVisible"
    center
    ref="dialogRef"
    class="details-dialog"
    title="订单详情"
  >
    <!--  <el-row style="
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      ">
      <el-button v-if="finalData.status == '2'" type="danger" size="large"
        @click.stop="orderOperation('0', finalData)">取消订单</el-button>
      <el-button v-if="finalData.status == '2'" type="danger" size="large"
        @click.stop="orderOperation('1', finalData)">订单分配</el-button>
      <el-button v-if="finalData.status == '3'" type="danger" size="large"
        @click.stop="orderOperation('2', finalData)">修改医护人员</el-button>
    </el-row> -->

    <div class="details-dialog-content">
      <orderInfo
        ref="orderInfoRef"
        :orderInfos="detailsInfo"
        :orderData="finalData"
        labeWidth="180px"
      >
        <!--        <template #product>
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1">
              <el-table :data="JSON.parse(finalData.product)" border stripe>
                <el-table-column prop="name" label="名称"> </el-table-column>
                <el-table-column prop="price" label="价格"> </el-table-column>
                <el-table-column prop="count" label="数量"> </el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>
        </template> -->
        <template #status>
          <el-tag :type="formatterStatus(finalData.status).type">
            {{ formatterStatus(finalData.status).name }}</el-tag
          >
        </template>
        <!--  支付方式 -->
        <template #pay_type>
          <span>{{ formatterPay_type(finalData.pay_type) }}</span>
        </template>
        <template #service_file>
          <tableFile :files="[finalData.service_file]" />
        </template>
        <template #realTime_video>
          <div
            style="margin-left: 15px; display: flex; align-items: center"
          ></div>
        </template>

        <!-- 医护人员病情记录 -->
        <template #content>
          {{ finalData.service_record?.content }}
        </template>
        <!-- 医护人员医护服务记录 -->
        <template #patient_condition>
          {{ finalData.service_record?.patient_condition }}
        </template>

        <!--  //价格详情 -->
        <template #price_Sumdetail>
          <el-collapse>
            <el-collapse-item name="1">
              <div style="width: 100%">
                <el-table
                  show-summary
                  border
                  width="100%"
                  stripe
                  :data="
                    formatterPrice_detail(
                      finalData.price_detail,
                      finalData.material_price_detail
                    )
                  "
                  style="width: 100%"
                >
                  <el-table-column prop="name" align="center" label="费用名称">
                  </el-table-column>
                  <el-table-column
                    prop="value"
                    align="center"
                    label="价格（元）"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
        </template>

        <template #evaluation_etails>
          <div>
            <div>
              <div>
                <div v-if="finalData?.comment?.content">
                  内容： {{ finalData?.comment?.content }}
                </div>
                <div v-if="finalData?.comment?.label">
                  标签：
                  <span
                    v-for="item in finalData?.comment?.label?.split(',')"
                    :key="item"
                  >
                    <el-tag type="success" size="small" class="mr5">{{
                      item
                    }}</el-tag>
                  </span>
                </div>
                <div style="margin: 5px 0px" v-if="finalData?.comment?.score">
                  评分：
                  <el-rate v-model="finalData.comment.score"></el-rate>
                </div>
              </div>
            </div>
            <div
              v-if="finalData?.comment?.pic"
              style="display: flex; align-items: center"
            >
              图片：
              <tableFile :files="finalData?.comment?.pic.split(',')" />
            </div>
          </div>
        </template>
        <!-- 历史评价 -->
        <template #historical_evaluation>
          <el-collapse v-if="commentList?.length > 0">
            <el-collapse-item name="1">
              <el-timeline>
                <div v-for="item in commentList" :key="item.created_at">
                  <el-timeline-item
                    :timestamp="item.created_at"
                    placement="top"
                  >
                    <el-card>
                      <h4>{{ item.item_name }}</h4>
                      <p>{{ item.label }}</p>
                    </el-card>
                  </el-timeline-item>
                </div>
              </el-timeline>
            </el-collapse-item>
          </el-collapse>
        </template>

        <!-- 差价费用 -->
        <template #supplementary_form>
          <el-collapse v-model="activeName2">
            <el-collapse-item name="activeName2">
              <div style="width: 100%">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 15px;
                  "
                >
                  <el-table stripe border :data="finalData.extend_order">
                    <el-table-column
                      prop="title"
                      align="center"
                      label="费用名称"
                    >
                    </el-table-column>
                    <!--       <el-table-column prop="amount" align="center" label="价格（元）">
                    </el-table-column> -->
                    <el-table-column
                      prop="desc"
                      align="center"
                      label="费用说明"
                    >
                    </el-table-column>
                    <!--      <el-table-column prop="status" align="center" label="支付状态">
                    </el-table-column>
                    <el-table-column prop="pay_time" width="160px" align="center" label="支付时间">
                    </el-table-column> -->
                    <el-table-column align="center" label="图片">
                      <template slot-scope="scope">
                        <tableFile :files="scope.row.pic?.split(',')" />
                      </template>
                    </el-table-column>

                    <!--    <tableFile :files="finalData.patient_pic.split(',')" /> -->
                  </el-table>
                </div>

                <!--  <h4>其他费用</h4>
                <span style="margin: 10px" v-for="(item, index) in formatterPrice_detail(
              finalData.price_detail
            )" :key="index">
                  {{ item.name }}
                  <span style="font-weight: bold; color: orange">{{
              item.value
            }}</span>元
                </span> -->
              </div>
            </el-collapse-item>
          </el-collapse>
        </template>

        <!-- 订单审核 -->

        <template #patient_pic>
          <!--   {{ finalData.patient_pic.split(",") }} -->
          <div @click.stop="">
            <tableFile :files="finalData?.patient_pic?.split(',')" />
          </div>
        </template>

        <!-- 处方信息 -->
        <template #advice>
          <el-collapse v-model="activeName1">
            <el-collapse-item name="1">
              <el-table border stripe :data="finalData.advice">
                <el-table-column prop="main" align="center" label="主诉">
                </el-table-column>
                <el-table-column prop="disease" align="center" label="诊断疾病">
                </el-table-column>
                <el-table-column prop="medical" align="center" label="药品">
                  <template slot-scope="scope">
                    <div
                      class="mb5"
                      v-for="item in JSON.parse(scope.row.medical)"
                      :key="item.id"
                    >
                      <el-popover trigger="hover" placement="top">
                        <p>单价: {{ item.price }}</p>
                        <div slot="reference" class="name-wrapper">
                          <el-tag size="medium"
                            >{{ item.name }}*{{ item.num }}</el-tag
                          >
                        </div>
                      </el-popover>
                    </div>
                    <!--   <el-button
                      type="primary"
                      size="mini"
                      @click="handleView(scope.row)"
                      >点击查看</el-button
                    > -->
                    <!--      {{ scope.row.medical }} -->
                  </template>
                </el-table-column>
                <el-table-column
                  prop="advice_pic"
                  align="center"
                  label="电子处方"
                >
                  <template slot-scope="scope">
                    <div class="flex-center">
                      <tableFile :files="scope.row?.advice_pic?.split(',')" />
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>
        </template>
        <!-- 病历信息 -->
        <template #case_history>
          <div style="display: flex">
            <div v-for="item in finalData.case_history" :key="item.id">
              <tableFile :files="item?.file?.split(',')" v-if="item.file" />
            </div>
          </div>
        </template>
      </orderInfo>

      <div class="content-right">
        <el-tabs v-model="activeName">
          <!--  <el-tab-pane label="服务流程" name="statuss">
            <el-timeline>
              <el-timeline-item v-for="(item, index) in timeLineArr" :key="index" :timestamp="item.created_at"
                placement="top">
                <p>{{ item.name }}</p>
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane> -->
          <el-tab-pane label="流程进度" name="status">
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in finalData.order_timeline"
                :key="index"
                :timestamp="item.created_at"
                placement="top"
              >
                <p>{{ item.name }}</p>
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!--     <orderReviewHandle ref="orderReview" @refresh="handleClose" />
    <orderAllocation ref="orderAllocation" @refresh="handleClose" /> -->
    <!--     <videoData ref="video" />
    <device ref="device"></device>
    <videoFlv ref="videoFlv"></videoFlv> -->
    <!--     <addRemarkDialog ref="addRemarkDialog" :type="2" @refresh="refresh2" /> -->
    <!--   <el-dialog
      :visible.sync="dialogVisible1"
      append-to-body
      center
      title="药品信息"
    >
      <el-table border stripe :data="dialogData" style="width: 100%">
        <el-table-column prop="name" label="药品名称"> </el-table-column>
        <el-table-column prop="dosage" label="剂量"> </el-table-column>
        <el-table-column prop="doseFrequency" label="频次"> </el-table-column>
      </el-table>
    </el-dialog> -->
  </el-dialog>
</template>

<script>
/* import orderReviewHandle from "./orderReviewHandle.vue";
import orderAllocation from "./orderAllocation.vue"; */
import { ApiCaseHistorySearch } from "@/api/index";
import orderInfo from "@/components/orderInfo.vue";
import { detailsInfo, medicalRecords } from "../config";
import tablePrImg from "@/components/tablePrImg.vue";
import tableFile from "@/components/tableFile.vue";
export default {
  components: {
    orderInfo,
    tablePrImg,
    /*     orderReviewHandle,
        orderAllocation, */
    tableFile,
    /*     videoData,
        device,
        videoFlv */
  },
  data() {
    return {
      dialogVisible1: false,
      activeName1: "",
      activeName: "",
      medicalRecords,
      formData: "detailsInfo",
      activeName2: "",
      videoSrc: "",
      dialogVisible: false,
      detailsInfo,
      finalData: [],
      timeLineArr: [],
      timeLinePay: [],
      activeName: "status",
      statusFormatter: [
        {
          name: "待支付",
          code: "1",
          type: "danger",
        },
        {
          name: "进行中",
          code: "2",
          type: "warning",
        },
        {
          name: "已完成",
          code: "3",
          type: "",
        },

        {
          name: "已取消",
          code: "4",
          type: "danger",
        },
        {
          name: "已评价",
          code: "5",
          type: "",
        },
        {
          name: "退款中",
          code: "6",
          type: "danger",
        },
      ],
      doctorComment: [],
      userComment: [],
      commentList: [],
      dialogData: [],
    };
  },
  methods: {
    /*   handleView(e) {
      let data = JSON.parse(e.medical);
      this.dialogData = data;
      this.dialogVisible1 = true;
    }, */
    /*  godevice(e) {
       this.getApiGdts(e.id)
 
     },
     getApiGdts(id) {
       ApiDeviceGPS({ order_id: id }).then(res => {
         if (!res.data) {
           this.$message.warning("暂无位置信息");
         } else {
           this.$refs.device.show(res.data)
         }
       })
     }, */
    /*     handleView(e) {
          this.videoSrc = this.$videoPath + e.record_path
          this.$refs.video.show(this.videoSrc)
        }, */

    /*     handleViewFlv(e) {
          ApiGetLiveUrl({ order_id: e.id }).then(res => {
            if (res.code == 200) {
              if (res.data == "") {
                this.$message.warning("请确认当前设备是否开机！");
              } else {
                this.$refs.videoFlv.show(res.data)
              }
    
            }
          })
    
        }, */

    formatterStatus(val) {
      let data = this.statusFormatter.find((item) => {
        if (item.code == val) {
          return item;
        }
      });
      if (data) {
        return data;
      } else {
        return val;
      }
    },
    formatterPay_type(val) {
      if (val == "1") {
        return "微信支付";
      } else {
        return val;
      }
    },
    formatterPrice_detail(val, mat) {
      if (val && mat) {
        let priceArr = JSON.parse(val);
        let mat1 = JSON.parse(mat);
        let dataV = [priceArr, mat1];
        let data = [];
        dataV.forEach((item, index) => {
          for (const key in item) {
            data.push({ name: key, value: dataV[index][key] });
          }
        });
        return data;
      }
    },
    show(row) {
      console.log(row);
      this.finalData = row;
      //医生评价
      /*    this.doctorComment = res.data.doctorComment
         //用户评价
         this.userComment = res.data.userComment */
      this.dialogVisible = true;
    },

    getOrderCommentList(id) {
      ApiGetOrderCommentList(id).then((res) => {
        if (res.data.length > 0) {
          this.commentList = res.data;
        }
      });
    },

    handleClose() {
      this.dialogVisible = false;
      this.$emit("refresh");
    },
    //获取订单进度列表
    getTimeLine(id) {
      //全部相关
      ApiOrderTimeLine(id).then((res) => {
        this.timeLineArr = res.data.all;
        this.timeLinePay = res.data.pay;
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-icon-arrow-right:before {
  content: "点击展开";
  font-size: 15px;
  font-family: "heiti";
  color: #2295ff;
  font-weight: bold;
}
/deep/ .el-collapse-item__arrow.is-active {
  transform: none;
}
/deep/ .el-collapse-item__arrow.is-active::before {
  content: "点击收起";
  font-size: 15px;
  font-family: "heiti";
  color: #2295ff;
  font-weight: 600;
}

.pantentItem:hover {
  color: skyblue;
}
.changePatentBtn {
  display: flex;
  justify-items: center;

  flex-wrap: wrap;
  .pantentItem {
    width: 100%;
    display: flex;
    justify-content: center;
    cursor: pointer !important;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}
.details-dialog {
  /deep/.el-dialog {
    min-width: 1300px;
  }
  /deep/.btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .el-button {
      height: 40px;
      // padding: 8px 20px;
    }

    > span {
      margin-bottom: 10px;
    }
  }
  &-content {
    display: flex;
    max-height: 700px;
    overflow: auto;
    padding-bottom: 6px;
    /deep/ .el-form {
      flex: 1;
      padding-right: 20px;
    }
    .content-right {
      padding-left: 20px;
      box-sizing: border-box;
      width: 300px;
    }

    /deep/.el-image,
    .tableFile {
      padding: 5px 0;
      vertical-align: middle;
    }
  }
  /deep/.el-rate {
    display: inline-block;
  }
  /deep/.el-timeline-item__content {
    padding-right: 10px;
  }
}
</style>
